<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="85px"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="油企名称" prop="enterpriseId" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择油企"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="油站名称" prop="stationNames" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.stationNames"
              :clearable="true"
              filterable
              placeholder="请选择油站名称"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationName"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="切换方式" prop="wayPayWay">
            <el-select
              v-model="queryParams.wayPayWay"
              size="small"
              style="width: 180px"
              clearable
            >
              <el-option label="按时间" value="0">按时间</el-option>
              <el-option label="按笔数" value="1">按笔数</el-option>
              <el-option label="按油枪" value="2">按油枪</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="操作时间" prop="timeRange">
            <el-date-picker
              v-model="timeRange"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              style="width: 180px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row
      class="global_el_rowStyle"
      :gutter="10"
      style="
        border-top: none;
        border-bottom: 1px solid #f5f5f5;
        margin-top: 0px;
      "
    >
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          size="mini"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="resetQuery"
          size="mini"
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          @click="handleForm('add', {})"
          size="mini"
          plain
          >新增</el-button
        >
      </el-col>
    </el-row>
    <!-- table -->
    <el-table :data="payWaylist" border style="width: 100%" v-loading="loading">
      <el-table-column label="序号" type="index" width="80" align="left">
      </el-table-column>
      <el-table-column
        prop="enterpriseName"
        label="油企"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="stationNames"
        label="油站"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="wayPayWay"
        label="切换方式"
        :formatter="payWayFormatter"
      ></el-table-column>
      <!-- <el-table-column prop="address" label="原支付商户" show-overflow-tooltip>
      </el-table-column> -->
      <!-- <el-table-column
        prop="address"
        label="切换支付商户"
        show-overflow-tooltip
      >
      </el-table-column> -->
      <el-table-column prop="createTime" label="操作时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="address" label="操作" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button type="text" @click="handleForm('edit', scope.row)"
            >编辑
          </el-button>
          <el-button type="text" @click="deletePayWay(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 新增或编辑渠道方式 -->
    <AddOrEditChannel
      :channelDialog.sync="channelDialog"
      :operation="operation"
      :currentRow="currentRow"
      @reloadData="getList"
    ></AddOrEditChannel>
  </div>
</template>
<script>
import { getStationList, listEnterpriseStation } from "@/api/dept";
import { enterpriseList } from "@/api/station/orderHistory";
import { getPayWayListApi, deletePayWayApi } from "@/api/payway";
import AddOrEditChannel from "./addOrEditChannel";
import { cloneDeep } from "lodash";
export default {
  name: "ChannelList",
  components: {
    AddOrEditChannel,
  },
  data() {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: "",
        stationId: "",
        stationNames: "",
      },
      timeRange: [], // 搜索时间范围
      enterpriseList: [],
      stationList: [],
      payWaylist: [],
      channelDialog: false, // 控制新增和编辑抽屉
      operation: "add", // 操作类型 add 新增  edit 编辑
      loading: false,
      currentRow: {}, // 当前选中行
    };
  },
  created() {
    this.getEnterpriseList();
    this.getList();
  },
  methods: {
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    // 根据油企获取该油企下的油站
    handleSelectChange(enterpriseId) {
      this.stationList = [];
      this.queryParams.stationId = null;
      this.queryParams.stationNames = null;
      this.getStationList(enterpriseId);
    },
    // 查询油站
    async getStationList(enterpriseId) {
      const res = await listEnterpriseStation({ enterpriseId: enterpriseId });
      this.stationList = res;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 重置
    resetQuery() {
      this.resetForm("queryForm");
      this.timeRange = [];
      this.getList();
    },
    // 获取列表数据
    async getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      if (this.timeRange && this.timeRange.length) {
        params.beginTime = this.timeRange[0];
        params.endTime = this.timeRange[1];
      }
      const res = await getPayWayListApi(params);
      this.loading = false;
      this.payWaylist = res.rows;
      this.total = res.total;
    },
    // 切换方式格式
    payWayFormatter(row) {
      const types = {
        0: "按时间",
        1: "按笔数",
        2: "按油枪",
      };
      return types[row.wayPayWay];
    },

    // 新增或编辑按钮事件
    handleForm(action, row) {
      if (action === "add") {
        this.currentRow = {
          wayPayWay: 0, // 0按时间设置  1按订单笔数  2 按油枪设置
          enterpriseId: null,
          weeks: [],
          beginTime: null,
          endTime: null,
          orderCount: null, // 订单笔数
          oilGun: [], // 油枪号
        };
      } else {
        this.currentRow = cloneDeep(row);
      }
      this.operation = action;
      this.channelDialog = true;
    },

    // 删除切换支付渠道数据
    deletePayWay(row) {
      this.$confirm("确定删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await deletePayWayApi({ id: row.id });
        this.msgSuccess("删除成功");
        this.getList();
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
